<template>
  <WidgetContainer :data="data">
    <div
        class="app-widget full-width full-height"
        ref="container"
    >
      <app-card
          :data="data.apps[0]" :key="data.apps[0].id" class="bg-transparent"
          @remove="onRemoveApp" @edit="onEdit"
          style="height: 100%"
      ></app-card>
      <app-card-edit-form
          v-if="formShow"
          v-model="formData"
          v-model:show="formShow"
          mode="update"
      ></app-card-edit-form>
    </div>
  </WidgetContainer>
</template>

<script>
import AppCard from '../components/AppCard'
import AppCardEditForm from 'src/pages/workbench/widgets/management/AppCardEditForm'
import WidgetContainer from 'src/pages/workbench/components/WidgetContainer'
import { cloneDeep } from 'lodash'

export default {
  name: 'AppWidget',
  components: {
    AppCard,
    AppCardEditForm,
    WidgetContainer
  },
  props: {
    data: Object
  },
  data () {
    return {
      formShow: false,
      currentApp: null,
      formData: {}
    }
  },
  methods: {
    updateWidget () {
      const widget = cloneDeep(this.data)
      this.$store.dispatch('widget/updateWidget', widget)
    },
    async onRemoveApp (app) {
      if (app.type === 1) {
        await this.$store.dispatch('widget/removeCollectionApp', app)
      }
      if (app.type === 2) {
        await this.$store.dispatch('widget/removeCustomApps', [app])
      }
    },
    onEdit () {
      this.formData = cloneDeep(this.data.apps[0])
      this.formShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.app-widget {

}
</style>
